export default {
  '@init'({ style }) {
    style.width = '100%'
    style.height = 200
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': ({ data, slot, env }: any, cate1) => {
    cate1.items = [
      {
        title: '状态列表',
        description: '通过眼睛图标，控制编辑态各状态的显示和隐藏',
        type: 'Array',
        options: {
          addText: '添加状态',
          getTitle: ({ title, value, checked }) => {
            let t = title
            if (![undefined, null].includes(value)) {
              t += `(${value})`
              if (checked) {
                t += `:默认显示`
              }
            }
            return t
          },
          onAdd: (id) => {
            const newSlot = {
              id,
              value: id,
              title: `状态`
            }
            slot.add(id, newSlot.title)
            return newSlot
          },
          onRemove(id) {
            slot.remove(id)
          },
          items: [
            {
              title: '状态名称',
              type: 'text',
              description: '状态的名称，语义化区分不同状态',
              value: 'title'
            },
            {
              title: '状态值',
              type: 'valueSelect',
              options: ['text', 'number', 'boolean'],
              description: '状态的唯一标识，用于控制显示隐藏',
              value: 'value'
            },
            {
              title: '默认显示',
              type: 'switch',
              value: 'checked'
            }
          ]
        },
        value: {
          get({ data }: any) {
            return data.statusList
          },
          set({ data, slots, slot }: any, options) {
            console.log(slots, slot)
            console.log(options)
            const initValue: any = []
            options.forEach(({ checked, value, title, _id }) => {
              slot.setTitle(_id, `${title}(${value})`)
              if (checked) initValue.push(value)
            })
            if (data.value && initValue.length > 1) {
              data.value = initValue.find((item) => item !== data.value)
            } else {
              data.value = initValue[0]
            }

            const formItemVal: any = data.value
            // 更新选项
            options = options.map((option) => {
              const checked = formItemVal !== undefined && option.value === formItemVal
              return {
                ...option,
                checked
              }
            })
            data.statusList = options
          }
        }
      }
    ]
  }
}
